<template>
  <div class="app-container">
    <Ht-search-form
      :dictMap="dictMap"
      :labelWidth="100"
      :queryParams="queryParams"
      :outputQueryParams="queryParams"
      :formOptions="formOptions"
      :advOptions="[]"
    ></Ht-search-form>
    <ht-table
      ref="dataTable"
      rowKey="orgNo,paraCode"
      :showSerialNumber="false"
      :multi-select="true"
      :dictMap="dictMap"
      :reqConfig="reqConfig"
      :queryParams="queryParams"
      :tableBindColumns="tableBindColumns"
      :opButtonList="opButtonList"
    >
      <template v-slot:operate>
        <el-table-column
          label="操作"
          align="center"
          width="160"
          class-name="small-padding fixed-width"
        >
          <template slot-scope="scope">
            <ht-button-group
              :buttonList="[
                {
                  label: '编辑',
                  permission: 'user:configInfo:edit',
                  doFunc: () => {
                    handleAction('update', scope.row);
                  }
                },
                {
                  label: '删除',
                  permission: 'user:configInfo:remove',
                  doFunc: () => {
                    handleAction('del', scope.row);
                  }
                }
              ]"
            />
          </template>
        </el-table-column>
      </template>
    </ht-table>
  </div>
</template>
<script>
import {
  delConfigInfo,
  apiUrlConfig
} from "@/api/cnaps/bizMng/paraMng.js";
import { listPageMixin } from "@/libs/listPageMixin";

export default {
  name: "RemitCheck",
  components: {  },
  mixins: [listPageMixin],
  data() {
    return {
      // 查询参数
      queryParams: {
        orgNo: "",
        paraCode: "",
        paraName: ""
      },
      // 搜索
      formOptions: [],
      reqConfig: apiUrlConfig,
      // 列信息
      tableBindColumns: [
        { label: `内部机构号`, prop: "orgNo" },
        { label: `内部机构名称`, prop: "orgname" },
        { label: `参数代码`, prop: "paraCode" },
        { label: `参数名称`, prop: "paraName" },
        { label: `参数值`, prop: "paraValue" },
        { label: `变更时间`, prop: "chgTime" },
      ],
      opButtonList: () => {
        return [
          {
            label: "新增",
            type: "primary",
            icon: "el-icon-plus",
            actionType: 'add',
            clickFun: () => {
              this.handleAction("add");
            }
          },
          {
            label: "删除",
            type: "danger",
            icon: "el-icon-delete",
            actionType: 'del',
          }
        ];
      }
    };
  },
  mounted() {
    const formOptions = [
      {
        type: "input",
        prop: "orgNo",
        defaultAttr: {
          size: "small",
          label: "内部机构号",
          placeholder: "请输入机构号",
        },
      },
      {
        type: "input",
        prop: "paraCode",
        defaultAttr: {
          size: "small",
          label: "参数代码",
          placeholder: "请输入参数代码",
        },
      },
      {
        type: "input",
        prop: "paraName",
        defaultAttr: {
          size: "small",
          label: "参数名称",
          placeholder: "请输入参数名称",
        },
      },
    ];
    this.formOptions = formOptions;
  },
  methods: {
    handleAction(type, row = {}) {
      switch (type) {
        case "add":
          this.$refs.editConfigDialog.show();
          break;
        case "del":
          const id = row.id || this.ids.join(",");
          this.$confirm(
            `是否确认删除 ${row ? "这" : ids.split(",").length} 个配置数据?`,
            "警告",
            {
              confirmButtonText: "确定",
              cancelButtonText: "取消",
              type: "warning"
            }
          )
            .then(function() {
              return delConfigInfo(id);
            })
            .then(() => {
              this.doQuery();
              this.msgSuccess("删除成功");
            })
            .catch(action => {});
          break;
        case "update":
          this.$refs.editConfigDialog.show(row.id);
          break;
      }
    }
  }
};
</script>
